<template>
  <div class="login-containt">
      <div style='height:100px;'></div>
    <div class="login-containt-cell">
      <div class="login-conteint-cell-title">济源市义务教育学校招生报名平台</div>
      <div>
          <!-- label-width与 class自定义的不能一起用 -->
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          :rules="rules"
          class="login-ruleForm"
          
        >
        <h3>系统登陆</h3>
          <el-form-item prop="usercode">
            <el-input placeholder="账号" v-model="numberValidateForm.usercode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="密码"
              v-model="numberValidateForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
            <!-- <el-button @click="resetForm('numberValidateForm')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/api";
export default {
  data() {
    return {
      numberValidateForm: {
        usercode: "",
        password: ""
      },
      rules: {
        usercode: [{ required: true, message: "账号不能为空" }],
        password: [{ required: true, message: "密码不能为空" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          sessionStorage.setItem("userInfo",'1111');
           this.$router.push({ path: "/home1/one1" });
           api.system.sys.login(this.numberValidateForm)
           .then(data=>{
             console.log(data)
           })
           .catch(error=>{
             console.log(error)
           })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped lang="scss">
.login-containt {
  min-height: 800px;  
  height: 100vh;
  background: rgb(125, 177, 216);
}
.login-containt-cell {
   
  .login-conteint-cell-title {
      
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    text-align:center;
    margin-bottom:40px;
  }
  .login-ruleForm{
      width:300px;
      background: #ffffff;
      margin:auto;
      padding:5px 40px;
      text-align:center;
      border-radius: 8px;
  }
}
</style>